﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="Script/jquery-1.10.2.js"></script>
    <script>
        //Socket.readyState
        //    0 - 表示连接尚未建立。
        //    1 - 表示连接已建立，可以进行通信。
        //    2 - 表示连接正在进行关闭。
        //    3 - 表示连接已经关闭或者连接不能打开。

        var url = null;
         $(function () {
             url = "ws://" + window.location.host + "/WebSocketHandler.ashx";
             var ws;
             function connect() {
                 var userName = $("#userName").val();
                 var url2 = url + "?userName=" + userName;
                 ws = new WebSocket(url2);
                 $('#tips').text('正在连接').css("color", "yellow");
                 ws.onopen = function (evt)//websocket 4个事件
                 {
                     $('#tips').text('已经连接').css("color", "green");
                 }
                 ws.onmessage = function (evt) {

                     $("#view ul").append("<li>" + evt.data + "</li>");
                 }
                 ws.onerror = function (evt) {
                     $('#tips').text(JSON.stringify(evt)).css("color", "red");
                 }
                 ws.onclose = function (evt) {
                     $('#tips').text('已经关闭').css("color", "gray");

                     //connect();//短线重连
                     //心跳： 定时器   时间间隔发个数据到服务器，服务再返回一下
                 }
             }
             $('#conn').click(function () {
                 connect();
             });

             $('#close').click(function () {
                 ws.close();
             });

             $('#send').click(function () {
                 if (ws.readyState == WebSocket.OPEN) {
                     ws.send($('#content').val());
                 }
                 else {
                     $('#tips').text('连接已经关闭，点击重连').css("color", "gray");
                 }
             });
         });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input id="userName" type="text" />
            <input id="conn" type="button" value="连接" />
            <input id="close" type="button" value="关闭" />
            <span id="tips" style="font-weight:bold"></span>
            <input id="content" type="text" />
            <input id="send" type="button" value="发送" />
        </div>
        <div id="view">
            <ul></ul>
        </div>
    </form>
</body>
</html>